<template>

<div>
    <!-- 右侧的过滤按钮 -->
    <div id="al-filterBtn" style="position: absolute;z-index:100">
        <router-link to="/activity/filter">
            <img id="activityListFilter" src="~assets/flow.svg" class="al-filterBtn-img">
        </router-link>
    </div>
     <!-- 活动列表区域 -->
    <!-- 下方的活动列表 -->
    <div @click="openActivity(activity.id)" v-for="activity in activies" class="activityList">
        <div  class="activity-block">
            <img @click="openActivity(activity.id)" height="350px" v-bind:src="activity.img"/>
            <!-- 居中文本 -->
            <div class="activity-mask" style="background-color:rgba(0, 0, 0, 0.3)">
                <div class="activity-describe">
                    <!--
                    <a href="/activity/view?id=6197 ">{{activity.title}}</a>
                    -->
                    <router-link to="http://www.baidu.com">
                        {{activity.title}}
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</div>


</template>

<script>
import { Masker } from 'vux'
export default {
  name: 'index',
   data(){
        return {
            activies:[
                {
                    title: "拳打脚踢艺人展",
                    id:100,
                    img: "https://o5omsejde.qnssl.com/demo/test1.jpg"
                },{
                    title: "二次元里喜欢的力量多强大",
                            id: 101,
                    img: "https://o5omsejde.qnssl.com/demo/test2.jpg"
                },{
                    title: "VR正在改变世界",
                            id:102,
                    img: "https://o5omsejde.qnssl.com/demo/test2.jpg"
                },{
                    title: "VR正在改变世界1",
                            id: 103,
                    img: "https://o5omsejde.qnssl.com/demo/test4.jpg"
                },{
                    title: "VR正在改变世界2",
                            id: 104,
                    img: "https://o5omsejde.qnssl.com/demo/test6.jpg"
                }
            ],
            showFilter: false
        }
  },
  mounted() {
    this.$nextTick(() => {
    });
  },
  methods: {
    openActivity: function(id){
        console.log("open")
      this.$router.push("http://www.baidu.com")
    }
  },
    components: {
        Masker
    }
};
</script>

<style lang="less">
.main-bg {
  width: 100%;
  vertical-align: bottom;
}


#al-filterBtn {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 40px;
    top: 40px;
    margin-left: -30px;
    margin-top: -30px;
    z-index: 10001;
}
.al-filterBtn-img {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 1rem;
    top: 1rem;
}
.activity-block{
    position: relative;
    -webkit-box-shadow: 0px 2px 2px #888;
    -moz-box-shadow: 0px 2px 2px #888;
    box-shadow: 0px 2px 2px #888;
}

.activity-block>img{
    width: 100%;
    display: inline-block;
    border: 0;
}

.activity-mask {

    width: 100%;
    height: 100%;
    overflow: auto;
    margin: auto;
    position: absolute;
    // top: 50%;
    // transform: translateY(-50%);
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;

}
.activity-describe {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);

}



</style>
